<script lang="ts" setup>
/**
 * 短租车调整记录
 */
import { reactive, ref, onMounted } from 'vue'
import { FormInstance } from 'element-plus'
import {
  queryBikeShortTermOperationRequestData,
  queryBikeShortTermOperationTableCol
} from '@/api/record/types/record'
import { queryBikeShortTermOperation } from '@/api/record'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import TimeRentRecordTable from '@/components/table/TimeRentRecordTable.vue'

defineOptions({
  name: 'TimeBikeRecord'
})
const form = reactive<queryBikeShortTermOperationRequestData>({
  bikeCode: '',
  phone: '',
  type: '',
  role: ''
})
const formRef = ref<FormInstance | null>(null)
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryBikeShortTermOperationTableCol>(
    queryBikeShortTermOperation,
    getToken() ?? '',
    () => form
  )
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
const reset = () => {
  formRef.value?.resetFields()
}
onMounted(() => {
  load()
})
</script>

<template>
  <div class="xy-container">
    <el-form inline ref="formRef" :model="form">
      <el-form-item prop="phone" label="用户手机号">
        <el-input v-model="form.phone" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="bikeCode" label="车辆编号">
        <el-input v-model="form.bikeCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="type" label="操作内容">
        <el-select v-model="form.type" style="width: 150px">
          <el-option value="" label="不限" />
          <el-option value="lock" label="锁车" />
          <el-option value="unlock" label="开锁" />
          <el-option value="openLuggage" label="开电池仓" />
          <el-option value="queryPower" label="查询电量" />
        </el-select>
      </el-form-item>
      <el-form-item prop="role" label="操作角色">
        <el-select v-model="form.role" style="width: 150px">
          <el-option value="" label="不限" />
          <el-option value="user" label="用户" />
          <el-option value="employee" label="运维" />
          <el-option value="customer" label="客服" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFormSearch">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <time-rent-record-table :data="data" :loading="loading" />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
